// 定义懒加载插件

import {useIntersectionObserver } from '@vueuse/core'

// 懒加载是指只有当图片进入可视区域时才开始加载，
export const lazyPlugin = {
  install (app) {
    // 懒加载指令逻辑
    app.directive('img-lazy', {
      mounted(el, binding) {
        // el: 制定绑定的哪个元素img
        //    <img data-v-63dd240e alt>
        // binding: binding.value 指令等于后面绑定表达式的值，图片url
        //    'https://yjy-oss-files.oss-cn-zhangjiakou.aliyuncs.com/tuxian/popular_1.jpg'
        // console.log(el, binding.value);

        const {stop} = useIntersectionObserver (
          el,
          ([{isIntersecting}]) => {
            // console.log(isIntersecting)
            if (isIntersecting) {
              // 进入视口区域
              el.src = binding.value
              stop()
            }
          }
        )
        
      },
    })
  }
}